<!DOCTYPE html>
<html>
<head>
  <title>各国失业率图表</title> 
  <meta charset="utf-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="referrer"content="always">
  {% load static %}
  <link rel="stylesheet" type="text/css" href="{% static '1.css' %}">
  <script src="{% static 'echarts.min.js' %}"></script>
  <script src="{% static 'jquery.min.js' %}"></script>
</head>
<body>
<table style="margin:10px auto;">
<tr>
    <td rowspan="2">
        <div id="main" style="width: 700px;height:400px; flaot:left;"></div>
    </td>
    <td align="right">
     国家：
     <input type="text" id="keywords" style="width:120px; height:20px; line-height:20px;" /> 
     <button onclick="doSearch();">搜索</button> </td>
</tr>
<tr>
    <td>
      <div style="height:400px; overflow:auto;">
          {% if COUNTRY_NAME_LIST %}
            <ul id="country_list">
            {% for question in COUNTRY_NAME_LIST %}
                <li style="margin:10px;"> 
                <a href="javascript:;"  onclick="loadChart('{{question.id}}')">
                {{ question.country_name }}
                </a>
                </li>
            {% endfor %}
            </ul>
        {% else %}
            <p>数据表中没有数据</p>
        {% endif %}
        </div>
    </td>
</tr>
</table>
 
  <script type="text/javascript">
        function doSearch(){
            var keywords = $("#keywords").val();
             $.post("/v1/search/",{keywords:keywords},function(data){
                if(data.length == 0){
                    return;
                }
                var box = $("#country_list").empty();
                for(var i=0; i<data.length; i++){
                    var rowid = data[i].id;
                    var rowname = data[i].country_name
                    var lihtml = '<li style="margin:10px;">\
                    <a href="javascript:;"  onclick="loadChart(\''+ rowid +'\')">\
                    '+ rowname +'\
                    </a>\
                    </li>'
                    box.append(lihtml);
                }
             });
        }

        function loadChart(id){
            var minyear = 1998;
            var maxyear = 2018;
            var arrCategory = [];
            for(var i=minyear;i<=maxyear;i++){
                arrCategory.push(i);
            }
            
            $.post("/v1/load/", {id: id}, function(data){
                var arr = [];
                for(var i=minyear;i<=maxyear;i++){
                    var d1 = "year"+ i;//year1998
                    var d2 = data[d1];

                    var d3 = 0;
                    if(!isNaN(d2 * 1)){
                        d3 = d2 * 1;
                    }
                    arr.push(d3);
                }
                var opt = {
                    title: {
                        text: data.country_name
                    },
                    xAxis: {
                        type: 'category',
                        data: arrCategory,
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [{
                        data: arr,
                        type: 'line',
                        smooth: true
                    }]
                }
                // end opt;
                setUpChart(opt);
            });
        }


        function setUpChart(option){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            if(option){
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }

        $(function(){
            $("#country_list").find("li:first").find("a").click();
        });
    </script>

  

</body>
</html>
